import { useEffect, useState } from 'react';
import '../index.less';
import { Form, Modal, Input, InputNumber, Select } from 'antd';
import type { QueryStubListParams, Stub } from '../services';
import { editStub, StubType } from '../services'
import { useRequest } from 'ahooks';
import { enum2options } from '@/utils/enum2options';

export interface StubEditModalProps {
  open: boolean
  onCancel?: (refresh?: boolean) => void
  stationId: string
  equipmentId: string
  stub?: Stub
  type: 'edit' | 'look'
  title?: string
}

const StubEditPage: React.FC<StubEditModalProps> = (props) => {
  const [editForm] = Form.useForm()
  const [searchForm] = Form.useForm<QueryStubListParams>()
  const [editable, setEditable] = useState(false)
  const [stub, setStub] = useState<Stub>()
  const { runAsync, loading } = useRequest(editStub, {manual: true})

  const onCancel = (refresh?: boolean) => {
    searchForm.resetFields()
    props.onCancel?.(refresh)
  }

  const onOk = () => {
    editForm.validateFields().then(values => {
      runAsync({
        ...values,
        stationId: props.stationId,
        equipmentId: props.equipmentId,
      }).then(() => {
        onCancel(true)
      })
    })
  }

  useEffect(() => {
    if (props.open) {
      setStub(props.stub)
      setEditable(props.type === 'edit')
      if (props.stub) {
        editForm.setFieldsValue({
          id: props.stub.id,
          name: props.stub.name,
          kw: props.stub.kw,
          current: props.stub.current,
          voltageBegin: props.stub.voltageBegin,
          voltageEnd: props.stub.voltageEnd,
          standardType: props.stub.standardType,
        })
      }
    }
  }, [props.open])
  
  return (
    <Modal
      title={props.title}
      className='container'
      open={props.open}
      onCancel={() => onCancel()}
      onOk={onOk}
      width={520}
      confirmLoading={loading}
      footer={editable ? undefined : false}
    >
      <Form form={editForm} name='editForm' labelCol={{flex: '130px'}}>
        <Form.Item name='id' label='枪编号' rules={[
          {required: true, message: '请输入枪编号'},
          {pattern: /^[0-9]*$/, message: '编号只可以是数字'},
        ]}>
          <Input placeholder='请输入' disabled={!editable || !!stub} />
        </Form.Item>
        <Form.Item name='name' label='枪名称' rules={[{required: true, message: '请输入枪名称'}]}>
          <Input placeholder='请输入' disabled={!editable} />
        </Form.Item>
        <Form.Item name='current' label='电流(A)' rules={[{required: true, message: '请输入电流'}]}>
          <InputNumber placeholder='请输入' style={{width: '100%'}} min={0} disabled={!editable} />
        </Form.Item>
        <Form.Item name='kw' label='最大功率(kW)' rules={[{required: true, message: '请输入最大功率'}]}>
          <InputNumber placeholder='请输入' style={{width: '100%'}} min={0} disabled={!editable} />
        </Form.Item>
        <Form.Item name='voltageBegin' label='额定电压下限(V)' rules={[{required: true, message: '请输入额定电压下限'}]}>
          <InputNumber placeholder='请输入' style={{width: '100%'}} min={0} disabled={!editable} />
        </Form.Item>
        <Form.Item name='voltageEnd' label='额定电压上限(V)' rules={[{required: true, message: '请输入额定电压上限'}]}>
          <InputNumber placeholder='请输入' style={{width: '100%'}} min={0} disabled={!editable} />
        </Form.Item>
        <Form.Item name='standardType' label='枪标准'>
          <Select options={enum2options(StubType)} placeholder='请选择' style={{width: '100%'}} disabled={!editable} allowClear />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default StubEditPage;
